<template>
  <div>
    <el-row :gutter="10">
    <div style="text-align: center;color: #909399;height: 30px" >
        <span style="margin-top: 5px;margin-bottom: 5px">论文年度来源统计</span>
      <el-divider style="height: auto"></el-divider>
    </div>
    </el-row>
    <el-row :gutter="20">
      <el-table
        :data="tableData"
        height="222"
        border
        style="width: 100%">
        <el-table-column
          prop="date"
          label="年份"
          width="180">
        </el-table-column>
        <el-table-column
          prop="cnki"
          label="知网"
          width="180">
        </el-table-column>
        <el-table-column
          prop="ei"
          label="EI">
        </el-table-column>
        <el-table-column
          prop="cssci"
          label="CSSCI">
        </el-table-column>
        <el-table-column
          prop="sci"
          label="SCI">
        </el-table-column>
        <el-table-column
          prop="ssci"
          label="SSCI">
        </el-table-column>
        <el-table-column
          prop="cpcoi"
          label="CPCOI-S">
        </el-table-column>
      </el-table>

    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div id="pie" class="chart"></div>
      </el-col>
      <el-col :span="8">
        <div id="bar" class="chart"></div>
      </el-col>
      <el-col :span="8">
        <div id="radar" class="chart"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Util from "@/assets/js/util";
export default {
    data() {
        return {
            tableData: [{
                    date: '2018',
                    cnki: '1301',
                    ei: '12',
                    cssci: '23',
                    sci: '45',
                    ssci: '46',
                    cpcoi: '33'
                },{
                date: '2019',
                cnki: '1954',
                ei: '22',
                cssci: '98',
                sci: '78',
                ssci: '342',
                cpcoi: '453'
            }, {
                date: '2020',
                cnki: '2156',
                ei: '88',
                cssci: '64',
                sci: '44',
                ssci: '66',
                cpcoi: '77'
            }, {
                date: '合计',
                cnki: '5411',
                ei: '122',
                cssci: '185',
                sci: '167',
                ssci: '454',
                cpcoi: '566'
            }]
        }
    },
  name: "EChartsSimple",
  computed: {
    chartPie() {
      return this.$echarts.init(Util.getDom("pie"));
    },
    chartBar() {
      return this.$echarts.init(Util.getDom("bar"));
    },
    chartRadar() {
      return this.$echarts.init(Util.getDom("radar"));
    }
  },
  methods: {
    drawPie() {
      this.$axios.get("/chart-simple/pie").then(res => {

        let title = "重点论文作者分布";
        this.chartPie.setOption({
          title: Object.assign({}, Util.defaultEchartsOpt.title, {text: title}),
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          color: ["#af84cb", "#3acaa9", "#ebcc6f", "#67c4ed", "rgba(32, 254, 255, 0.5)"],
          series: [
            {
              name: title,
              type: "pie",
              radius: "55%",
              center: ["50%", "50%"],
              data: res.data.data,
              roseType: "radius",
              label: {
                normal: {
                  textStyle: {
                    color: "#777"
                  }
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: "#888"
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                }
              },
              itemStyle: {
                normal: {
                  shadowBlur: 200,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              },
              animationType: "scale",
              animationEasing: "elasticOut",
              animationDelay: function(idx) {
                return Math.random() * 200;
              }
            }
          ]
        });
      });
      return this;
    },
    drawBar() {
      this.$axios.get("/chart-simple/bar").then(res => {

        let title = "论文年度趋势";
        this.chartBar.setOption({
          title: Object.assign({}, Util.defaultEchartsOpt.title, {text: title}),
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c}"
          },
          xAxis: {
            type: "category",
            data: res.data.xData,
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 12
              }
            }
          },
          yAxis: {
            type: "value",
            splitLine: {
              lineStyle: {
                color: ['#D4DFF5']
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 12
              }
            }
          },
          series: [
            {
              name: title,
              data: res.data.yData,
              type: "bar",
              symbol: "triangle",
              symbolSize: 20,
              lineStyle: {
                normal: {
                  color: "green",
                  width: 4,
                  type: "dashed"
                }
              },
              barWidth: 25,
              itemStyle: {
                normal: {
                    barBorderRadius: 30,
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                      [
                        {
                            offset: 0,
                            color: '#00feff'
                        },
                        {
                            offset: 0.5,
                            color: '#027eff'
                        },
                        {
                            offset: 1,
                            color: '#0286ff'
                        }
                      ])
                }
              },
            }
          ]
        });
      });
      return this;
    },
    drawRadar() {
      this.$axios.get("/chart-simple/radar").then(res => {

        let title = "全球论文分布";
        this.chartRadar.setOption({
          title: Object.assign({}, Util.defaultEchartsOpt.title, {text: title}),
          tooltip: {},
          radar: {
            name: {
              textStyle: {
                color: "#999",
              }
            },
            center: ["50%", "58%"],
            radius: "57%",
            indicator: [
              { name: "知网", max: 16000 },
              { name: "EI", max: 16000 },
              { name: "CSSCI", max: 16000 },
              { name: "SCI", max: 16000 },
              { name: "SSCI", max: 16000 },
              { name: "CPCOI-S", max: 16000 }
            ]
          },
          series: [
            {
              name: "国外 vs 国内（Foreign vs Domestic）",
              type: "radar",
              symbol: "circle",
              symbolSize: 10,
              data: [
                {
                  value: res.data.budget,
                  name: "国外（Foreign Papers）",
                  areaStyle: {
                      normal: {
                          color: "rgba(154, 116, 179, 0.7)"
                      }
                  },
                  itemStyle:{
                      color: 'rgba(154, 116, 179, 1)',
                      borderColor: 'rgba(154, 116, 179, 0.3)',
                      borderWidth: 10,
                  },
                  lineStyle: {
                      normal: {
                          color: "rgba(154, 116, 179, 1)",
                          width: 2
                      }
                  },
                },
                {
                  value: res.data.spending,
                  name: "国内（Domestic Papers）",
                  areaStyle: {
                      normal: {
                          color: "rgba(126, 237, 238, 0.7)"
                      }
                  },
                  itemStyle:{
                      color: 'rgba(126, 237, 238, 1)',
                      borderColor: 'rgba(126, 237, 238, 0.3)',
                      borderWidth: 10,
                  },
                  lineStyle: {
                      normal: {
                          color: "rgba(126, 237, 238, 1)",
                          width: 2
                      }
                  },
                }
              ]
            }
          ]
        });
      });
      return this;
    },
    resizeChart() {

      window.addEventListener("resize", () => {
        this.chartPie.resize();
        this.chartBar.resize();
        this.chartRadar.resize();
      });
    }
  },
  mounted() {

    this.drawPie().drawBar().drawRadar().resizeChart();
  }
};
</script>

<style scoped lang="less">
.el-row {
  margin-top: 20px;
}
.chart {
  width: 100%;
  height: 330px;
  .border-radius(8px);
  background-color: @boxBgColor;
  box-shadow: 0 0 5px transparent;
  &:hover {
    box-shadow: 0 0 5px @mainColor;
  }
}
</style>
